<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            color: red;
        }

        .box div {
            display: none;
        }

        .show {
            display: block !important;
        }
    </style>
</head>

<body>

    <div class="box" id="a">
        <button class="active">1</button>
        <button>2</button>
        <button>3</button>

        <div class="show">111</div>
        <div>222</div>
        <div>333</div>

    </div>



    <div class="box" id="b">
        <button class="active">1</button>
        <button>2</button>
        <button>3</button>
        <button>4</button>

        <div class="show">111</div>
        <div>222</div>
        <div>333</div>
        <div>444</div>
    </div>

    <script>

        // tab('#a', 'click');

        // tab('#b', 'mouseover')

        // function tab(el, type) {
        //     const oBox = document.querySelector(el)
        //     const oBtns = oBox.querySelectorAll('button');
        //     const oDivs = oBox.querySelectorAll('div');

        //     // 循环绑定事件
        //     for (let i = 0; i < oBtns.length; i++) {
        //         oBtns[i].addEventListener(type, function () {
        //             // console.log(i);
        //             // 清除所有样式
        //             for (let j = 0; j < oBtns.length; j++) {
        //                 oBtns[j].classList.remove('active');
        //                 oDivs[j].classList.remove('show');
        //             }
        //             // 给当前添加
        //             this.classList.add('active');
        //             oDivs[i].classList.add('show');
        //         })

        //     }
        // }


        // 改成面向对象  
        //    把变量变成属性
        //    把实现功能的部分变成方法
        function Tab(el, type) {
            this.oBox = document.querySelector(el);
            this.oBtns = this.oBox.querySelectorAll('button');
            this.oDivs = this.oBox.querySelectorAll('div');
            this.type = type;
            this.event()
        }

        Tab.prototype.event = function () {
            console.log(1);
            const _this = this;
            // 循环绑定事件
            for (let i = 0; i < this.oBtns.length; i++) {
                this.oBtns[i].addEventListener(this.type, function () {
                    console.log(this);   // 点击的按钮
                    for (let j = 0; j < _this.oBtns.length; j++) {
                        _this.oBtns[j].classList.remove('active');
                        _this.oDivs[j].classList.remove('show');
                    }
                    this.classList.add('active');
                    _this.oDivs[i].classList.add('show');
                })
            }
        }


        const t1 = new Tab('#a', 'click');
        // t1.event()



    </script>


</body>

</html>